<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<button @click="count++">点击+1</button>
			<p>点击次数:{{count}}</p>
			<button @click="count1++">点击+1</button>
			<p>点击次数:{{count1}}</p>
			<hr >
			<my-button></my-button><my-button></my-button><my-button></my-button>
		</div>
		<script>
			//组件
			const MyButton = Vue.defineComponent({
				data(){
					return{
						count:0
					}
				},
				template:`
				<button @click="count++">点击+1</button>
				<p>点击次数:{{count}}</p>
				`
			})
			Vue.createApp({
				components:{
					'my-button':MyButton
				},
				data() {
					return {
						count: 0,
						count1: 0
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
